<template>
  <div class="app-container">
    <el-row :gutter="30">
      <el-col :span="24">
        <div class="query-form">
          <el-form ref="tableSearchParam" :model="tableSearchParam" label-width="50px" :inline="true">
            <el-form-item label="名称" label-width="50px">
              <el-input v-model="tableSearchParam.name" style="width:200px" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="listTableData" icon="el-icon-search" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <br/>
        <el-table
          :data="tableData"
          border
          empty-text="暂无数据"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="35">
          </el-table-column>
          <el-table-column
            label="名称"
            property="name">
          </el-table-column>
          <el-table-column
            label="工单模板">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.templateName === null ? 'danger' : 'success'"
                disable-transitions>{{scope.row.templateName === null ? '未设置' : scope.row.templateName}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-edit"
                @click="editTemplate(scope.$index, scope.row)">设置模板
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page=this.currentPage
            :page-sizes="[10, 20, 30, 40]"
            :page-size=this.pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total=this.total>
          </el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="设置模板" :visible.sync="dialogFormVisible" top="10vh" width="55%">
      <el-form :model="formData" style="margin-left: 150px">
        <el-form-item label="设置模板" :label-width="formLabelWidth" prop="name">
          <el-select v-model="formData.templateId" placeholder="请选择" no-data-text="暂无数据" style="width:200px">
            <el-option
              v-for="item in allTemplateData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleTemplate">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .page {
    text-align: center;
    margin-top: 20px;
  }

  .query-form {
    border-bottom: 1px solid #ebeef5;
    padding-top: 25px;
  }
</style>

<script>
  import onlineServiceCompanyApi from '@/api/onlineServiceCompanyApi'
  import electronicWorksheetsTemplateApi from '@/api/electronicWorksheetsTemplateApi'

  export default {
    created() {
      this.initData()
    },
    data() {
      return {
        formLabelWidth: '80px',
        dialogFormVisible: false,
        formData: {
          templateId: ''
        },
        allTemplateData: [],
        tableData: [],
        currentPage: 1,
        pageSize: 10,
        total: 0,
        tableSearchParam: {
          name: ''
        }
      }
    },
    methods: {
      initData() {
        this.listTableData()
      },

      listTableData() {
        onlineServiceCompanyApi.listOnlineServiceCompany(this.tableSearchParam, this.currentPage, this.pageSize, (res) => {
          this.tableData = res.list
          this.total = res.total
        }, () => {
        })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.listTableData()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.listTableData()
      },
      editTemplate(index, row) {
        this.formData.templateId = row.templateId
        electronicWorksheetsTemplateApi.listAllElectronicWorksheetsTemplate({}, (res) => {
          this.allTemplateData = res
          this.formData.id = row.id
          this.dialogFormVisible = true
        }, () => {
        })
      },
      handleTemplate() {
        onlineServiceCompanyApi.setWorkTemplate(this.formData.id, this.formData.templateId, (res) => {
          this.dialogFormVisible = false
          this.$message({
            message: '设置成功',
            type: 'success'
          })
          this.initData()
        }, () => {
        })
      }
    }
  }
</script>
